<template>
  <view class="container">

    <view class="back-btn" @click="goBack">
      <uni-icons type="left" size="20" color="#080404"></uni-icons>
    </view>
    <!-- 背景 -->
    <view class="bg-container">
      <image class="bg-image" :src="currentBgImage || getFullImageUrl('@/static/image/bgmy.png')" mode="aspectFill">
      </image>
      <view class="bg-overlay" @click="openBgPopup" v-if="currentUser === targetUserId">
        <uni-icons type="image" size="20" color="#FFFFFF"></uni-icons>
        <text>更换背景</text>
      </view>
    </view>

    <uni-popup ref="bgPopup" type="bottom">
      <view class="custom-popup">
        <view class="popup-title">更换背景</view>
        <view class="popup-btn" @click="chooseImage('album')">打开相册</view>
        <view class="popup-btn" @click="chooseImage('camera')">使用相机</view>
        <view class="popup-cancel" @click="closeBgPopup">取消</view>
      </view>
    </uni-popup>

    <!-- 用户信息卡片 -->
    <view class="content-wrapper">
      <view class="content-top">
        <view class="left-content">
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
          <view class="user-info">
            <text class="username">{{ userInfo.nickname }}</text>
            <text class="perfect-info">
              {{ (userInfo.gender === 1 ? '女' : (userInfo.gender === 0 ? '男' : '未知')) }}　{{ userInfo.age || '0' }}岁　{{
                userInfo.height || '178' }}cm
            </text>
          </view>
        </view>
        <view class="follow-btn" @click.stop="toggleFollow" v-if="false">
          <uni-icons :type="userInfo.isFollowed ? 'heart-filled' : 'heart'" size="20"
            :color="userInfo.isFollowed ? '#F76F17' : '#A3A6B7'"></uni-icons>
          <text>{{ userInfo.followCount || '喜欢' }}</text>
        </view>
      </view>

      <!-- 自我描述 + 状态标签 -->
      <view class="desc-tag-group">
        <text class="self-desc">自我描述：{{ userInfo.selfDesc || '该用户未填写自我描述' }}</text>
        <view class="tag-group">
          <view class="tag-reputation">
            <view class="tag-icon">
              <image :src="getFullImageUrl('@/static/my/tagRep.png')" style="width: 62rpx; height: 32rpx;"></image>
              <text class="tag-badge">{{ userInfo.reputation_points || '0' }}</text>
            </view>
            <text>{{ userInfo.reputation_points > 80 ? '信誉很好' : (userInfo.reputation_points >= 60 &&
              userInfo.reputation_points <= 80) ? '信誉一般' : '信誉很差' }}</text>
          </view>

          <view class="tag-rating">
            <view class="tag-icon2">
              <text>{{ userInfo.positive_review_rate || '0' }}%</text>

            </view>
            <text>好评率</text>
          </view>

          <view class="tag-verify" :class="{ 'verified': userInfo.realname_verified === 1 }">
            <view class="tag-icon3">
              <image :src="getFullImageUrl('@/static/my/tb.png')" style="width: 33rpx; height: 32rpx;"></image>
            </view>
            <text>{{ userInfo.realname_verified === 1 ? '已实名' : '未实名' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部举报菜单弹窗 -->
    <uni-popup ref="reportActionPopup" type="bottom">
      <view class="custom-popup">
        <view class="popup-btn" @click="openReportModal(currentItem, currentItemIndex)">举报</view>
        <view class="popup-cancel" @click="closeReportActionPopup">取消</view>
      </view>
    </uni-popup>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <text class="nav-btn" :class="{ active: currentTab === '动态' }" @click="switchTab('动态')">发布的动态</text>
      <text class="nav-btn" :class="{ active: currentTab === '相册' }" @click="switchTab('相册')">个人相册</text>
    </view>




    <!-- 动态列表 -->
    <view class="dynamic-info" v-if="currentTab === '动态'">
      <view class="dynamic-item" v-for="(item, index) in dynamicList" :key="index">
        <!-- 动态内容 -->
        <view class="dynamic-content">
          <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
          <view class="text-wrap">
            <view class="header">
              <view>
                <view class="nickname">{{ item.nickname }}</view>
                <view class="time">{{ item.post_time }}</view>
              </view>
              <text v-if="currentUser === targetUserId" class="delete" @tap="openDeleteModal(index)">删除</text>
              <uni-icons v-else type="more-filled" size="26" color="#A3A6B7" class="report"
                @tap="showMoreOptions(item, index)"></uni-icons>

            </view>

            <view class="content-container" :class="{ 'expanded': item.isExpanded }">
              <view class="content" :id="'content_' + index">{{ item.content }}</view>
              <text v-if="item.shouldShowToggle" class="toggle-btn" @tap.stop="toggleContentExpand(item, index)">
                {{ item.isExpanded ? '收起' : '...展开' }}
              </text>
            </view>
            <!-- 添加动态媒体（图片和视频） -->
            <view class="dynamic-images" v-if="item.media && item.media.length > 0">
              <template v-for="(media, mediaIndex) in item.media.slice(0, 9)">
                <image v-if="media.type === 'image'" :src="media.url" mode="aspectFill" class="dynamic-img"
                  :class="{ 'single-img': item.media.length === 1 }" @tap="openImageViewer(item, mediaIndex)"
                  :key="'image-' + mediaIndex"></image>
                <!-- 修改视频部分，添加容器和播放按钮 -->
                <view v-else-if="media.type === 'video'" class="video-container"
                  :class="{ 'single-img': item.media.length === 1 }" :key="'video-container-' + mediaIndex">
                  <video :src="media.url" mode="aspectFill" class="dynamic-video"
                    :ref="'video-' + index + '-' + mediaIndex" :id="'video-' + index + '-' + mediaIndex"
                    :controls="false" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-play-btn="false"
                    :show-progress="false" :show-mute-btn="false" :enable-progress-gesture="false"
                    :enable-progress-tap="false" :enable-play-gesture="false" :show-loading="false"
                    @loadedmetadata="updateVideoDuration($event, item, index, mediaIndex)"
                    @click.stop="handleVideoClick($event, item, index, mediaIndex)"></video>
                  <!-- 播放按钮覆盖层 -->
                  <image class="video-play-btn" :src="getFullImageUrl('@/static/faxian/bofan.png')"
                    @click.stop="handleVideoClick($event, item, index, mediaIndex)" style="width:60rpx;height: 76rpx;">
                  </image>
                  <!-- 时长显示 -->
                  <view class="video-duration" v-if="media.duration">
                    {{ formatVideoDuration(media.duration) }}
                  </view>
                </view>
              </template>
            </view>
            <view class="info">
              <button @tap="onShare(item)" open-type="share" class="info-item">
                <image class="menu-icon" :src="getFullImageUrl('@/static/faxian/share.png')"></image>

                <text>分享</text>
              </button>
              <view @tap="openCommentModal(item, index)" class="info-item">
                <image class="menu-icon" :src="getFullImageUrl('@/static/faxian/comment.png')"></image>
                <text>
                  {{ item.comment_count > 0 ? item.comment_count : '评论' }}
                </text>
              </view>
              <view @tap="toggleLike(item)" class="info-item" :disabled="item.isLikedDisabled">
                <!-- <uni-icons :type="item.liked ? 'heart-filled' : 'heart'" size="20"
                                    :color="item.liked ? '#F76F17' : '#A3A6B7'"></uni-icons> -->
                <image class="menu-icon" :src="getFullImageUrl('@/static/faxian/like.png')" v-show="!item.liked"
                  style="width: 33rpx;"></image>

                <image class="menu-icon" :src="getFullImageUrl('@/static/faxian/likeflill.png')" v-show="item.liked"
                  style="width: 33rpx;"></image>

                <text :style="{ color: item.liked ? '#F76F17' : '#A3A6B7' }">
                  {{ item.likes > 0 ? item.likes : '点赞' }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view style="width: 580rpx; height: 1rpx; background-color: #EEF2F3; margin-left: calc(50% - 250rpx);">
        </view>

        <!-- 评论弹窗（Unipop 底部弹窗） -->

        <uni-popup :ref="'commentPopup' + index" type="bottom" @close="closePopup('commentPopup', index)">
          <view class="comment-popup">
            <view class="popup-title">全部评论 {{ item.comment_count }}</view>
            <!-- 评论列表 -->
            <scroll-view class="comment-list" scroll-y="true" @scrolltolower="loadMoreComments($event, index)"
              v-if="item.comments && item.comment_count > 0">
              <view class="comment-item" v-for="(comment, cIndex) in item.comments" :key="cIndex">
                <view class="comment-header">
                  <!-- 添加用户头像 -->
                  <image class="comment-avatar" :src="comment.avatar || '/static/image/logo.jpg'">
                  </image>
                  <view class="comment-content">
                    <view class="comment-header-left">
                      <text class="comment-nickname">{{ comment.nickname }}</text>
                      <text class="comment-time">{{ comment.time }}</text>
                    </view>
                    <!-- 点赞功能 -->
                    <view class="comment-actions" @tap="likeComment(comment, cIndex, item.id)">
                      <text class="comment-likesNum" :class="{ 'liked': comment.liked }">
                        {{ comment.likes > 0 ? comment.likes : '点赞' }}
                      </text>
                      <uni-icons :type="comment.liked ? 'heart-filled' : 'heart'" size="20"
                        :color="comment.liked ? '#F76F17' : '#A3A6B7'">
                      </uni-icons>
                    </view>
                  </view>
                </view>
                <view class="comment-text">
                  <text @tap="replyComment(comment, cIndex, index)">{{ comment.content }}</text>
                </view>

                <!-- 回复列表 -->

                <view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                  <view class="reply-item" v-for="(reply, rIndex) in getVisibleReplies(comment)" :key="rIndex">
                    <text class="reply-content" @tap="replyComment(reply, rIndex, cIndex)">{{
                      reply.content }}</text>
                  </view>

                  <view class="view-more" v-if="comment.replies.length > 2" @tap="viewAllReplies(comment)">
                    {{ comment.isExpanded ? '收起全部' : '查看全部' }} {{ comment.reply_count }} 条回复
                  </view>
                </view>
              </view>
            </scroll-view>
            <view class="no-comment" v-else>
              <image src="/static/image/logo.jpg"></image>
              <text>当前暂无评论</text>
            </view>

            <!-- 评论输入 -->
            <view class="comment-input-wrap">
              <input class="comment-input" v-model="commentValue"
                :placeholder="replyTo ? '回复 @' + replyTo : '输入评论内容'" />
              <button class="send-btn" :class="{ active: commentValue.trim() }"
                @tap="sendComment(item, replyTo, replyCommentIndex, replyDynamicIndex)">发送</button>
            </view>
          </view>
        </uni-popup>


        <!-- 举报弹窗 -->
        <uni-popup :ref="'reportPopup' + index" type="center" @close="closePopup('reportPopup')">
          <view class="report-popup">
            <view class="report-popup-header">
              <text class="popup-title">举报说明<text style="color: #F76F17;">*</text></text>
              <text class="cancel" @click="closePopup('reportPopup', index)">取消返回</text>
            </view>
            <textarea class="report-popup-textarea" v-model="reportReason" placeholder="输入您举报的原因"></textarea>
            <button class="report-popup-btn" :style="{ backgroundColor: reportReason ? '#BEFF33' : '#D0D4D7' }"
              :disabled="!reportReason" @tap="submitReport(currentItem, currentItemIndex)">确认提交</button>
          </view>
        </uni-popup>
        <!-- 删除动态弹窗 -->
        <uni-popup :ref="'deletePopup' + index" type="center" @close="closePopup('deletePopup', index)">
          <view class="delete-popup">

            <view class="delete-message">当前正在删除动态是否继续</view>
            <view class="delete-buttons">
              <view class="cancel-btn" @click="closePopup('deletePopup', index)">返回</view>
              <view class="confirm-btn" @tap="confirmDelete(item, index)">确认</view>
            </view>
          </view>
        </uni-popup>

      </view>
    </view>

    <!-- 相册列表 -->
    <view class="album-list" v-else>
      <!-- 动态循环所有月份 -->
      <view v-for="(month, monthIndex) in sortedMonths" :key="monthIndex" class="album-container">
        <view class="album-month">
          {{ month }}
        </view>
        <view class="photo-container">
          <view class="photo-item" v-for="(item, photoIndex) in albumData[month]" :key="photoIndex"
            :class="{ 'selected': isSelecting && isPhotoSelected(month, photoIndex) }">
            <template v-if="item.type === 'video'">
              <view class="video-container">
                <video class="photo" :src="item.src" mode="aspectFill" :controls="false" :show-center-play-btn="false"
                  :show-fullscreen-btn="false" :show-play-btn="false" :show-progress="false" :show-mute-btn="false"
                  :enable-progress-gesture="false" :enable-progress-tap="false" :enable-play-gesture="false"
                  :show-loading="false" :poster="item.coverUrl || ''"
                  @loadedmetadata="updateVideoDuration($event, item, month, photoIndex)"
                  @longpress="currentUser === targetUserId ? startSelectMode(month, photoIndex) : null"
                  @click="isSelecting ? selectPhoto(month, photoIndex) : playVideo(item, month, photoIndex)" :disabled="isSelecting && currentUser !== targetUserId">
                </video>
                <!-- 播放按钮覆盖层 -->
                <image class="video-play-btn" :src="getFullImageUrl('@/static/faxian/bofan.png')"
                  @click.stop="playVideo(item, month, photoIndex)" style="width:60rpx;height:76rpx;"></image>
                <!-- 左下角时长显示 -->
                <view class="video-duration" v-if="item.duration">
                  <!-- 确保无论是否有真实时长都显示时长文本 -->
                  {{ formatVideoDuration(item.duration || 60) }}
                </view>
              </view>
            </template>
            <template v-else>
              <image class="photo" :src="item.src" mode="aspectFill" @longpress="currentUser === targetUserId ? startSelectMode(month, photoIndex) : null"
                @click="isSelecting ? selectPhoto(month, photoIndex) : viewPhoto(item)" :disabled="isSelecting && currentUser !== targetUserId">
              </image>
            </template>
            <!-- 圆形选择指示器容器 -->
            <view v-if="isSelecting" class="select-indicator-container">
              <!-- 未勾选图标 -->
              <image v-if="!isPhotoSelected(month, photoIndex)" :src="getFullImageUrl('@/static/my/noselet.png')"
                style="width: 32rpx; height:32rpx;"></image>
              <!-- 勾选图标 -->
              <image v-else :src="getFullImageUrl('@/static/my/selet.png')" style="width: 32rpx; height:32rpx;"></image>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部操作栏 - 只有查看自己的动态时才显示删除操作 -->
      <view class="bottom-bar" v-if="getSelectedCount() > 0 && currentUser === targetUserId">
        <view class="action-btn" @click="cancelSelect">取消</view>
        <view class="delete-btn" @click="openPhotoDeletePopup">删除</view>
      </view>


      <!-- 删除照片弹窗 -->
      <uni-popup ref="photoDeletePopup" type="center" @close="closePhotoDeletePopup">
        <view class="delete-popup">
          <view class="delete-message">当前正在删除照片以及相关动态是否继续</view>
          <view class="delete-buttons">
            <view class="cancel-btn" @click="closePhotoDeletePopup">返回</view>
            <view class="confirm-btn" @tap="deleteSelected()">确认</view>
          </view>
        </view>
      </uni-popup>

    </view>



    <!-- 查看图片弹窗 -->
    <ImageViewer v-show="showImageViewer" :showViewer.sync="showImageViewer" :avatar="viewerData.avatar"
      :nickname="viewerData.nickname" :imageUrl="viewerData.imageUrl" :content="viewerData.content"
      :likeCount="viewerData.likeCount" :commentCount="viewerData.commentCount" :liked="viewerData.liked"
      @like="handleImageLike" @comment="handleImageComment"></ImageViewer>

    <!-- 视频查看器 -->
    <videView :videoUrl="currentVideoUrl" v-show="showVideoView" :showViewer.sync="showVideoView" />

  </view>
</template>

<script src="./myDynamics.js"></script>

<style lang="scss" src="./myDynamics.scss"></style>
